<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>12_reactive</title>
	<base target="blank">
	<style>
		#konwledege{
			position: fixed;
			right: 2%;
			top:2%;
			text-decoration:underline;
			color:inherit;
			outline: none;
			color: orange;
			font-size: 12px;
		}
		#toTop{
			position: fixed;
			right: 2%;
			bottom: 2%;
			box-shadow: 1px 1px 1px rgba(0,0,0,.5);
			border-radius: 100%;
			width: 40px;
			height: 40px;
			line-height: 40px;
			font-size: 12px;
			text-align: center;
			color: red;
			z-index: 9999;
		}
		*{margin:0;padding: 0;}
		body{
			font-family: 'Microsoft yahei', Verdana, '仿宋',Arial, Helvetica, sans-serif;
			font-size: 18px;
			max-width: 1000px;
			margin: auto;
			position: relative;
		}
		a{text-decoration:none;color:inherit;outline: none;}
		img{border:none;vertical-align: middle;outline:none;}
		li{list-style:none;}
		
		section{
			position: relative;
			margin:50px auto;
		}
		section>h2{
			margin-bottom: 25px;
			text-align: center;
		}
		/*------------------------------jd-----------------------------------*/
	</style>
	<style id='css'>
		section{
			margin: 100px auto;
			width: 800px;
			height: 360px;
			transform:rotateZ(0deg);
			perspective:800px;
			box-shadow: 1px 1px 5px #000;
		}
		section > .wrap{
			height:100%;
			cursor: pointer;
		}
		section > .wrap > ul{
			height: 100%;
		}
		section > .wrap > ul > li{
			float: left;
			position: relative;
			height: 100%;
			transform-style:preserve-3d;
			transform-origin:center center -180px;
			transform:rotateX(0deg);
		}
		section > .wrap > ul > li > div{
			position: absolute;
			width: 100%;
			height: 100%;			
		}
		section > .wrap > ul > li > div:nth-child(1){
			background: url(img/1.png) no-repeat 0;
		}
		section > .wrap > ul > li > div:nth-child(2){
			background: url(img/3.png) no-repeat 0/cover;
			transform:translateZ(-360px) rotateX(180deg);
		}
		section > .wrap > ul > li > div:nth-child(3){
			background: url(img/4.png) no-repeat 0/cover;
			top:-360px;
			transform-origin:bottom;
			transform:rotateX(90deg);
		}
		section > .wrap > ul > li > div:nth-child(4){
			background: url(img/2.png) no-repeat 0/cover;
			transform-origin:top;
			transform:rotateX(-90deg);
			top:360px;
		}
		section > .wrap > ol{
			position: absolute;
			width: 100px;
			bottom: 20px;
			right: 20px;
			display: flex;
			justify-content:space-around;
		}
		section > .wrap > ol > li{
			width: 15px;
			height: 15px;
			border-radius: 50%;
			background-color: #fff;
			cursor: pointer;
		}
		section > .wrap > ol > li.on{
			background-color: orange;
		}
	</style>
</head>
<body>
	<div id="konwledege"><a href="baseKnowledege.html" target="_self">基本知识</a></div>
	<a href="#" id='toTop'>Top</a>
	<section>
		<div class="wrap">
			<ul>
				<!-- <li>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
				</li>
				<li>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
				</li>
				<li>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
				</li>
				<li>
					<div></div>
					<div></div>
					<div></div>
					<div></div>
				</li>
				 -->
			</ul>
			<ol>
				<li class="on"></li>
				<li></li>
				<li></li>
				<li></li>
			</ol>
		</div>		
	</section>
	<script>
		(function () {
			var oUl = document.querySelector('section > .wrap > ul');
			var num = 100;

			init(num);
			function init(num){
				var frag = document.createDocumentFragment();//Dom碎片
				var createObj = null;
				var createDiv = null;
				var liWidth = 800 / num;
				var z = -1;
				oUl.innerHTML = '';
				for (var i = 0; i < num; i++) {
					createObj = document.createElement('li');
					if(i>num/2){
						createObj.style = 'width:'+ liWidth + 'px ; z-index:'+(--z)+';';
					}else {
						createObj.style = 'width:'+ liWidth + 'px';
					}
					for(var j=0;j<4;j++){
						createDiv = document.createElement('div');
						createDiv.style = 'background-position:' + (-i*liWidth) + 'px';
						createObj.appendChild(createDiv);
					}
					frag.appendChild(createObj);
				}
				oUl.appendChild(frag);
			}
			auto();
			function auto(){
				window.onload = function(){
					var timer = null;
					var oLi = oUl.querySelectorAll('li'),
						length = oLi.length;
					var btn = document.querySelectorAll('section > .wrap > ol > li');
					var index = 0;
					var flag = true;

					play();

					function play(){
						timer = setInterval(function(){
							btn[index].className = '';
							index ++;
							index %= 4;
							btn[index].className = 'on';
							change();
						},2000);
					}

					function change(){
						for(var i=0;i<length;i++){
							oLi[i].style.cssText += 
							'\
								transform:rotateX('+(-90*index)+'deg);\
								transition:0.5s '+ 0.5*i/length +'s\
							';
						}
					}

					for(var i=0;i<4;i++){
						btn[i].index = i;
						btn[i].onclick = function(){
							console.log(flag);
							if(flag){
								flag = false;
								btn[index].className = '';
								index = this.index;
								this.className = 'on';
								change();
							}else {
								setTimeout(function(){
									flag = true;
								},300);	
							}
											
						};
					}
					
					oUl.parentNode.onmouseenter = function(){
						clearInterval(timer);
						timer = null;
					};
					oUl.parentNode.onmouseleave = function(){
						if(!timer){
							play();
						}
					};
				};
			}
		})();
	</script>
</body>
</html>